<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YOUME IM for Web Demo</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
    <link rel="stylesheet" href="demo/style.css">
    <script src="demo/vconsole.min.js"></script>
</head>
<body>
<section class="main">

    <!-- 头部展示房间号和用户名 -->
    <header>
        <div class="room">
            <div id="room-joined" style="display: none">
                <strong id="dsp-room-name">benz</strong>
                <button id="btn-room-leave">退出房间</button>
            </div>
            <div id="room-no-join">
                <input type="text" id="text-room-id" value="benz" placeholder="房间号">
                <button id="btn-room-join">加入房间</button>
            </div>
            <div id="room-joining" style="display: none">
                <span>
                    正在加入房间 <strong id="dsp-room-joining-name">benz</strong> ...
                </span>
            </div>
        </div>
        <div class="user">
            <div id="user-logged" style="display: none">
                <span id="dsp-user-name">sanji</span>
                <button id="btn-user-logout">退出登录</button>
            </div>
            <div id="user-no-log">未登录</div>
        </div>
    </header>

    <!-- 聊天内容框 -->
    <article>
        <ul id="chat">

        </ul>
    </article>

    <!-- 内容输入框 -->
    <footer>
        <!-- 语音输入框 -->
        <div id="voice-ctrl">
            <div class="to-text">
                <button id="btn-to-text"></button>
            </div>
            <div class="voice-button">
                <div id="btn-hold-speak" class="">
                    <span id="btn-hold-speak-text">按住 说话</span>
                    <!-- 按住说话 语音控制遮罩 -->
                    <div id="speak-control" class="btn-hold-mask">
                        <!-- 松手指示 -->
                        <div id="speak-display-recording">上划取消发送</div>
                        <div id="speak-display-leave-to-cancel" style="display: none">松手取消发送</div>
                        <!-- 松手取消录音区域 -->
                        <!--<div id="speak-control-cancel-rec"></div>-->
                        <!-- 松手完成录音区域 -->
                        <!--<div id="speak-control-finish-rec"></div>-->
                    </div>
                </div>
            </div>
        </div>
        <!-- 文本输入框 -->
        <div id="text-ctrl" style="display: none">
            <div class="to-voice">
                <button id="btn-to-voice"></button>
            </div>
            <div class="text-field">
                <input type="text" id="text-msg" placeholder="输入文字...">
            </div>
            <div class="send-text-button">
                <button id="btn-send">发送</button>
            </div>
        </div>
    </footer>

    <!-- 登录框 -->
    <div id="login-form">
        <div class="login-outer">
            <h2 class="login-title">登录</h2>
            <div class="login-form">
                <p class="login-form-p">
                    <label for="login-user-id">用户ID：</label>
                    <input type="text" id="login-user-id">
                </p>
                <div class="login-form-preset-users">
                    <div class="one-preset-user">
                        <input type="radio" id="login-sanji" name="preset-user" value="sanji">
                        <label for="login-sanji">sanji</label>
                    </div>
                    <div class="one-preset-user">
                        <input type="radio" id="login-zoro3000" name="preset-user" value="zoro3000">
                        <label for="login-zoro3000">zoro3000</label>
                    </div>
                    <div class="one-preset-user">
                        <input type="radio" id="login-youme_test201701" name="preset-user" value="youme_test201701">
                        <label for="login-youme_test201701">youme_test201701</label>
                    </div>
                    <div class="one-preset-user">
                        <input type="radio" id="login-youme_test201702" name="preset-user" value="youme_test201702">
                        <label for="login-youme_test201702">youme_test201702</label>
                    </div>
                </div>
                <p class="login-form-p">
                    <label for="login-user-token">Token：</label>
                    <input type="password" id="login-user-token">
                </p>
                <p class="login-form-p">
                    <label for="login-room-id">房间号：</label>
                    <input type="text" id="login-room-id" value="benz">
                </p>
                <div class="login-form-submit">
                    &nbsp;<button id="btn-login" class="primary">登录</button>
                </div>
            </div>
        </div>
    </div>

    <div id="v-console-switch">调试</div>

</section>

<!-- 聊天模板：提示信息 -->
<script id="tpl-notice" type="text/template">
    <div class="msg msg-notice">
        <span>{{text}}</span>
    </div>
</script>

<!-- 聊天模板：文本（左） -->
<script id="tpl-left-text" type="text/template">
    <div class="msg msg-left">
        <div class="user-header">
            <img class="img-auto" src="./demo/images/user_icon.png" alt="{{name}}">
        </div>
        <div class="box">
            <div class="user-name">{{name}}</div>
            <div>
                <span class="bubble text chat-arrow">{{text}}</span>
            </div>
        </div>
    </div>
</script>

<!-- 聊天模板：文本（右） -->
<script id="tpl-right-text" type="text/template">
    <div class="msg msg-right">
        <div class="user-header">
            <img class="img-auto" src="./demo/images/user_icon.png" alt="{{name}}">
        </div>
        <div class="box">
            <div class="user-name">{{name}}</div>
            <div>
                <span class="bubble text chat-arrow">{{text}}</span>
            </div>
        </div>
    </div>
</script>

<!-- 聊天模板：语音（左） -->
<script id="tpl-left-voice" type="text/template">
    <div class="msg msg-left">
        <div class="user-header">
            <img class="img-auto" src="./demo/images/user_icon.png" alt="{{name}}">
        </div>
        <div class="box">
            <div class="user-name">{{name}}</div>
            <div>
                <a href="javascript:void(0);" class="bubble voice chat-arrow" style="width: {{width}}px" id="btn-voice-{{id}}"></a>
                <i class="voice-duration">{{time}}″</i>
            </div>
        </div>
    </div>
</script>

<!-- 聊天模板：语音（右） -->
<script id="tpl-right-voice" type="text/template">
    <div class="msg msg-right">
        <div class="user-header">
            <img class="img-auto" src="./demo/images/user_icon.png" alt="{{name}}">
        </div>
        <div class="box">
            <div class="user-name">{{name}}</div>
            <div>
                <a href="javascript:void(0);" class="bubble voice chat-arrow" style="width: {{width}}px" id="btn-voice-{{id}}"></a>
                <i class="voice-duration">{{time}}″</i>
            </div>
        </div>
    </div>
</script>

<!-- JS 错误追踪 -->
<script>
    window.onerror = function(err, l, o){
        alert(err + '; ' + l + '; ' + o);
    };
</script>

<!-- 引入 SDK -->
<!--<script src="../../test/yim.core.js"></script>-->
<script src="yim.core.min.js"></script>
<script src="yim.text.message.min.js"></script>
<!--<script src="../../test/yim.voice.message.js"></script>-->
<script src="yim.voice.message.min.js"></script>
<!--<script src="../../test/yim.mp3.recorder.js"></script>-->
<script src="yim.mp3.recorder.min.js"></script>
<script src="yim.wechat.recorder.min.js"></script>
<script src="yim.amr.recorder.min.js"></script>

<!-- 引入微信 JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" type="text/javascript"></script>

<!-- 参看 Demo -->
<script src="demo/main.js"></script>

</body>
</html>
